<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>关联性</title>
</head>
<style>
    /* 修改前 */
    .parent1 {
        font-size: 40px;
    }

    .childButton1 {
        font-size: 20px;
        line-height: 30px;
        padding: 6px 16px;
        border-radius: 5px;
        color: white;
        border: 1px solid #446d88;
        text-shadow: 0 -1px 1px #335166;
        box-shadow: 0 1px 5px gray;
        background: #58a linear-gradient(#77a0bb, #58a);
    }

    /* 修改后 */
    .parent2 {
        font-size: 40px;
    }

    .childButton2 {
        font-size: 50%;
        line-height: 1.5;
        padding: 0.2em 0.5em;
        border: 1px solid rgba(0, 0, 0, 0.1);
        ;
        border-radius: 0.17em;
        color: white;
        text-shadow: 0 -0.03em 0.03em rgba(0, 0, 0, 0.5);
        box-shadow: 0 0.03em 0.17em rgba(0, 0, 0, 0.5);
        background: #58a linear-gradient(hsla(0, 0%, 100%, 0.2), transparent);
    }

    .childButton2.red {
        background-color: red;
    }
</style>

<body>
    <!-- 修改前 -->
    <div class="parent1">
        <div class="childButton1">第一个button</div>
    </div>
    <!-- 修改后 -->
    <div class="parent2">
        <div class="childButton2">第一个button</div>
        <div class="childButton2 red">红色的button</div>
    </div>

</body>
<script type="text/javascript">
</script>

</html>